import { reactive } from 'vue'
import Test1 from '../assets/imgs/test1.jpg'
import Test2 from '../assets/imgs/test2.jfif'
import Test3 from '../assets/imgs/test3.jpg'
import Test4 from '../assets/imgs/test4.jpg'
import Test5 from '../assets/imgs/test5.webp'

const cameras = reactive([
  { id: 1, ip: '192.168.1.101', pic: Test1, isChecked: false, processedImg: Test1 },
  { id: 2, ip: '192.168.1.102', pic: Test2, isChecked: false, processedImg: Test2 },
  { id: 3, ip: '192.168.1.103', pic: Test3, isChecked: false, processedImg: Test3 },
  { id: 4, ip: '192.168.1.104', pic: Test4, isChecked: false, processedImg: Test4 },
  { id: 5, ip: '192.168.1.105', pic: Test5, isChecked: false, processedImg: Test5 }
])

const processCameraImg = (id: number, img: string) => {
  const camera = cameras.find((camera) => camera.id === id)
  if (camera) {
    camera.processedImg = img
  }
}

export const useCameraStore = () => {
  return {
    cameras,
    processCameraImg
  }
}
